import React from "react";
import View from "../base/View";
import defaultData from "./data";
import {WeaInput, WeaLocaleProvider} from "ecCom";
import { Button } from 'antd';
import './index.less';
import VerifyCode from './VerifyCode';
import ImageCode from './ImageCode';

const { getLabel } = WeaLocaleProvider;
const formatMultiLang = WeaLocaleProvider.formatMultiLang;

export default class MobileView extends View {
  state = {
    isShowCode: false,
    imageMsg: {
      isImageCom: false,
      captcha: '',
      value: '',
    }
  };

  onImageCom = imageMsg => this.setState({imageMsg});

  renderCodeBtn () {
    return (
      <div className="mt10">
        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@x47lax`} 
          type="primary" 
          className='verify-btn wea-edc-form-btn'
          onClick={() => this.setState({isShowCode: true})}>
          {getLabel('511314', '点击获取验证码')}
        </Button>
      </div>
    );
  }

  renderCodeContent(){
    const { data: { smsVerification }, value, uuid, shortkey } = this.props;
    const { isShowCode, imageMsg } = this.state;

    if(!parseInt(smsVerification)) return null;

    if(parseInt(smsVerification) && !isShowCode) return this.renderCodeBtn();

    return (
      <div className='mt10'>
        <ImageCode ecId={`${this && this.props && this.props.ecId || ''}_ImageCode@3mjpxq`}
        uuid={uuid}
        onImageCom={this.onImageCom}
        >
        </ImageCode>
        <VerifyCode ecId={`${this && this.props && this.props.ecId || ''}_VerifyCode@fbx6t0`} 
          value={value}
          imageMsg={imageMsg}
          shortkey={shortkey}
          uuid={uuid}
          data={this.props.data}
        />
      </div>
    )
  }

  renderContent(data, value) {
    const { placeholder } = data;
    
    return (
      <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@0cidrr`}>
        <div className='wea-edc-input-conatiner wea-input-normal'>
          <i className='icon-edc-f-mobile wea-edc-input-icon' />
          <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@xmaa1a`} 
            value={value} 
            onBlur={this.handleValueChange} 
            regExp={/^[0-9]*$/} 
            length={11}
            placeholder={formatMultiLang(placeholder)}
          />
        </div>
        <div className="wea-edc-verify-btn-wrapper">
          {this.renderCodeContent()}
        </div>
      </React.Fragment>
    );
  }
}

MobileView.defaultProps = {
  data: defaultData,
  value: ''
};